<template>
  <div class="">
    <div class="common_block_div ">
      <div class="common_page_tt flex_ac margin_b10">页面标题</div>
      <el-form ref="form" :rules="rules" :model="form"  label-width="120px">
        <el-row>
          <FormItem label="输入框" class="" :span="7" type="input" :form="form" prop="title" clearable />
          <FormItem label="数字输入" class="" :span="7" type="number" :form="form" prop="number_val" clearable />
          <FormItem label="下拉选择" class="" :span="7" type="select" :form="form" prop="role_ids" :seleDatas="openOptions" seleKey="id" seleName="title" clearable filterable />
          <FormItem label="下拉多选" multiple class="" :span="7" type="select" :form="form" prop="multiple_ids" :seleDatas="openOptions" seleKey="id" seleName="title" clearable filterable />
          <FormItem label="密码" class="" :span="7" type="password" :form="form" prop="pass" clearable />
          <FormItem label="时间选择" class="" :span="7" type="day" :form="form" prop="time" clearable />
          <FormItem label="文本框" class="" :span="7" type="textarea" :form="form" prop="text" clearable />

          <!-- 超出两个就用下拉选择 -->
          <FormItem label="两选项单选" class="" :span="7" type="radioss" radioyes="启用" radiono="禁用" :form="form" prop="status" clearable />

          <el-col :span="7">
            <el-form-item label="图片上传" prop="menu_icon" >
              <SigleUpload :limit="1" :img="form.menu_icon || ''" accept="image/*" class="black" type="picture-card" formkey="menu_icon" form="form" @PicturePreview="PicturePreview" @handleUploadSuccess="handleUploadSuccess" @handleUploadRemove="handleUploadRemove"></SigleUpload>
            </el-form-item>
          </el-col>


        </el-row>
        <el-row>
          <FormItem label="一行一个" class="" :span="7" type="input" :form="form" prop="title" clearable />
        </el-row>

        <el-row>
          <FormItem label="一行一个" class="" :span="7" type="input" :form="form" prop="title" clearable />
        </el-row>

        <div class="bottom_btn pad_t10" style="padding-left: 120px;">
            <el-button type="primary" @click="submitForm('form')" :loading="is_ajax">提交</el-button>
            <el-button @click="$router.go(-1)">取消</el-button>
        </div>
      </el-form>

    </div>

    <!-- 上传图片预览 -->
    <el-dialog  :close-on-click-modal="false" append-to-body @closed="uploadImageUrl=''" width="600px" :visible.sync="uploadImgVisible">
      <img style="width: 100%;" :src="uploadImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
// 上传组件
import SigleUpload from "@/components/UploadImage/sigleUpload";
export default {
  name: 'add_company',
  components: {SigleUpload},
  data () {
    return {
      id: '',
      is_ajax: false,
      form: {
          is_hid:0,
          sort:0,
          menu_icon:""
      },
      rules: {
        title: [
          { required: true, message: "公告标题不能为空",trigger: "blur"}
        ],
        description: [
          { required: true, message: "公告描述不能为空",trigger: "blur"}
        ],
        content: [
          { required: true, message: "公告内容不能为空",trigger: "blur"}
        ]
      },
      openOptions: [{id:'1',title:'选项1'},{id:'2',title:'选项2'}],
      open:false,
      // 上传图片
      uploadImageUrl: '',
      uploadImgVisible: false
    }
  },
  created() {
    this.id=this.$route.query.id || '';
    if(this.id){
        this.get_data()
    }
  },
  methods:{
    // 上传图片--s
    PicturePreview(file) {
      this.uploadImageUrl = file.url;
      this.uploadImgVisible = true;
    },
    handleUploadSuccess(res){
      console.log(res)
      this[res.form][res.key]=res.url
    },
    handleUploadRemove(res){
      this[res.form][res.key]=''
    },

    // 表单重置
    reset(pid) {
      this.form = {
        is_hid:0,
        sort:0
      };
      if(this.$refs['form']){
        this.$refs['form'].clearValidate();
      }
    },
    /** 提交按钮 */
    submitForm: function(form) {
      this.$refs[form].validate((valid)  => {
        if (valid) {
          this.is_ajax=true;
          if(form=='form'){
            let url="/api/Article/create1";
            if(this.form.id){
              url="/api/Article/edit1"
            }
            let _data={...this.form}
            _data.content=this.remove_upload_http(_data.content)
            this.axios.post(url, _data).then((res) => {
                if (res) {
                    this.$message.success('操作成功');
                    this.$router.go(-1)
                } else {
                    this.$message.error(res.message);
                }
                this.is_ajax=false;
            }).catch((err) => {
                console.log(err);
                this.is_ajax=false;
            });
          }
        }
      });
    },
    get_data(){
        this.axios.get("/api/Article/read", {params:{id:this.id}}).then((res) => {
            if (res) {
                let _data=res.data;
                this.form=_data
            } else {
                this.$message.error(res.message);
            }
        }).catch((err) => {
            console.log(err);
        });
    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
